<template>
  <el-form style="width: 60%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

    <el-form-item label="科目名" prop="Cname">
      <el-input v-model="ruleForm.Cname"></el-input>
    </el-form-item>

    <el-form-item label="学时" prop="Cperiod">
      <el-input v-model="ruleForm.Cperiod"></el-input>
    </el-form-item>

    <el-form-item label="上课周期" prop="Cclasshour">
      <el-input v-model="ruleForm.Cclasshour"></el-input>
    </el-form-item>

    <el-form-item label="收费" prop="Cpayment">
      <el-input v-model="ruleForm.Cpayment"></el-input>
    </el-form-item>

    <el-form-item label="上课地点" prop="Cplace">
      <el-input v-model="ruleForm.Cplace"></el-input>
    </el-form-item>

    <el-form-item label="教师号" prop="Tno">
      <el-input v-model="ruleForm.Tno"></el-input>
    </el-form-item>

    <el-form-item label="招收人数" prop="Cneed">
      <el-input v-model="ruleForm.Cneed"></el-input>
    </el-form-item>

    <el-form-item label="已报人数" prop="Cjoin">
      <el-input v-model="ruleForm.Cjoin"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        Cname: '',
        Cperiod: '',
        Cclasshour: '',
        Cpayment: '',
        Cplace: '',
        Tno: '',
        Cneed: '',
        Cjoin: '',
      },
      rules: {
        Cname: [
          { required: true, message: '科目名不能为空', trigger: 'blur' }
        ],
        Cperiod: [
          { required: true, message: '学时不能为空', trigger: 'blur' }
        ],
        Cclasshour: [
          { required: true, message: '上课周期不能为空', trigger: 'blur' }
        ],
        Cpayment: [
          { required: true, message: '收费不能为空', trigger: 'blur' }
        ],
        Cplace: [
          { required: true, message: '上课地点不能为空', trigger: 'blur' }
        ],
        Tno: [
          { required: true, message: '教师号不能为空', trigger: 'blur' }
        ],
        Cneed: [
          { required: true, message: '招收人数不能为空', trigger: 'blur' }
        ],
        Cjoin: [
          { required: true, message: '已报名人数不能为空', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      const _this = this;
      console.log(this.ruleForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post('http://localhost:8152/api/auth/course/add',this.ruleForm).then(function (res) {
            console.log(res.data)
            if(res.data.msg == "添加成功"){
              _this.$alert(_this.ruleForm.Cname+'添加成功！', '消息', {
                confirmButtonText: '确定',
                callback: action => {
                  _this.$router.push('/courseInformation')
                }
              })
            }
          })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
